<template>
  <div id="main"> 
    <el-row>
      <el-col :span=24>
        <div style="float:left">
          <strong style="font-size:20px">个人基本信息查看</strong>
          <span class="prompt">(此页面仅供查看个人信息，审核请返回审核界面完成)</span>
        </div>
        <div style="width:90px;float: right;margin: 0 50px 5px 15px">
          <el-button type="success" icon="el-icon-back" @click="goBack" round>返回</el-button>
        </div>
        <div style="float: right">
          <el-button type="primary" icon="el-icon-download" style="float:right;" @click="down()" round>
            预览
            <!-- <a :href="'http://localhost/cultivate/php/uploads/html/downloadPersonInfo.html?item=' + id">下载</a> -->
          </el-button>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <table style="margin-top: 20px;" border="1px" cellspacing="0" cellpadding="0" class="table">
        <tr>
          <td bgcolor="#90D0FC">姓名</td>
          <td><el-input v-model="formInfo.name" placeholder="" readonly></el-input></td>
          <td bgcolor="#90D0FC">性别</td>
          <td>
            <el-radio-group v-model="formInfo.sex" readonly>
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
            </el-radio-group>
          </td>
          <td bgcolor="#90D0FC">出生日期</td>
          <td>
            <el-date-picker
            readonly
            v-model="formInfo.birth"
            type="date"
            value-format="yyyy:MM:dd"
            placeholder="选择日期">
            </el-date-picker>
          </td>
          <td bgcolor="#90D0FC">民族</td>
          <td>
            <el-input v-model="formInfo.nation" placeholder="" readonly></el-input>
          </td>
        </tr>
        <tr>
          <td bgcolor="#90D0FC">政治面貌</td>
          <td>
            <el-input v-model="formInfo.politics" placeholder="" readonly></el-input>
          </td>
          <td bgcolor="#90D0FC">身份证号</td>
          <td><el-input v-model="formInfo.idnumber" reasonly></el-input></td>
          <td bgcolor="#90D0FC">工作单位</td>
          <td><el-input v-model="formInfo.sch"></el-input></td>
          <td bgcolor="#90D0FC">行政职务</td>
          <td><el-input v-model="formInfo.preoccupation" readonly></el-input></td>
        </tr>
        <tr>
          <td bgcolor="#90D0FC">专业技术职务</td>
          <td><el-input v-model="formInfo.majoroccupation" readonly></el-input></td>
          <td bgcolor="#90D0FC">参加工作时间</td>
          <td>
            <el-input v-model="formInfo.majortime" readonly></el-input>
          </td>
          <td bgcolor="#90D0FC">职务级别</td>
          <td><el-input v-model="formInfo.jobrank" readonly></el-input></td>
          <td bgcolor="#90D0FC">最高学历</td>
          <td>
            <el-input v-model="formInfo.edu" readonly></el-input>
          </td>
        </tr>
        <tr>
          <td bgcolor="#90D0FC">最后学位</td>
          <td>
            <el-input v-model="formInfo.degree" readonly></el-input>
          </td>
          <td bgcolor="#90D0FC">通讯地址</td>
          <td><el-input v-model="formInfo.address" reasonly></el-input></td>
          <td bgcolor="#90D0FC">邮政编码</td>
          <td><el-input v-model="formInfo.postalcode" reasonly></el-input></td>
          <td bgcolor="#90D0FC">办公电话</td>
          <td><el-input v-model="formInfo.office" reasonly></el-input></td>
        </tr>
        <tr>
          <td bgcolor="#90D0FC">手机</td>
          <td><el-input v-model="formInfo.phone" reasonly></el-input></td>
          <td bgcolor="#90D0FC">qq号</td>
          <td><el-input v-model="formInfo.qq" reasonly></el-input></td>
          <td bgcolor="#90D0FC">电子信箱</td>
          <td><el-input v-model="formInfo.email" reasonly></el-input></td>
          <td bgcolor="#90D0FC">传真</td>
          <td><el-input v-model="formInfo.fax" reasonly></el-input></td>
        </tr>
        <tr>
          <td bgcolor="#90D0FC">身份</td>
          <td colspan="3">
            <el-cascader
            style="width:100%;"
              v-model="formInfo.level"
              :options="options"
              :props="{ expandTrigger: 'hover' }"
               @change="handleChange"></el-cascader>
             </td>

        <!--   <td bgcolor="#90D0FC">是否为心理健康专职辅导员</td>
          <td>
            <el-radio-group v-model="formInfo.health" readonly>
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group></td>
            <td bgcolor="#90D0FC">是否为学生管理干部</td>
          <td>
            <el-radio-group v-model="formInfo.teacher" readonly>
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group></td> -->
            <td bgcolor="#90D0FC">是否为班主任</td>
          <td>
            <el-radio-group v-model="formInfo.master" readonly>
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group></td>
            <!-- <td bgcolor="#90D0FC">辅导员专兼职情况</td>
          <td>
            <el-radio-group v-model="formInfo.instructor" readonly>
              <el-radio :label="1">专职</el-radio>
              <el-radio :label="2">兼职</el-radio>
            </el-radio-group></td> -->
            <td bgcolor="#90D0FC">人事关系</td>
          <td>
            <el-select v-model="formInfo.personrelation" placeholder="请选择">
              <el-option
                v-for="item in personrelationList"
                :key="item.label"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select></td>
            <!-- <td bgcolor="#90D0FC">所带学生层次</td>
          <td>
            <el-select v-model="formInfo.student_degree" placeholder="请选择">
              <el-option
                v-for="item in student"
                :key="item.label"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select></td> -->
        </tr>
        <tr>
          <td bgcolor="#90D0FC">所带学生</td>
          <td colspan="3">
            <span style="margin-left:7px;">本科生</span>
            <el-input 
            style="width:22%"
            v-model="formInfo.student_number1" 
            placeholder="所带本科生人数" 
            trigger="hover"
            content="请输入数字"></el-input>
            <span style="margin-left:7px;">专科生</span>
            <el-input 
            style="width:22%"
            v-model="formInfo.student_number2" 
            placeholder="所带专科生人数" 
            trigger="hover"
            content="请输入数字"></el-input>
            <span style="margin-left:7px;">研究生</span>
            <el-input 
            style="width:22%"
            v-model="formInfo.student_number3" 
            placeholder="所带研究生人数" 
            trigger="hover"
            content="请输入数字"></el-input>
            <!-- <el-select v-model="formInfo.student_degree" placeholder="请选择">
              <el-option
                v-for="item in student"
                :key="item.label"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select> -->
          </td>

          <!-- <td bgcolor="#90D0FC">所带学生层次</td>
          <td>
            <el-select v-model="formInfo.student_degree" placeholder="请选择">
              <el-option
                v-for="item in student"
                :key="item.label"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select></td>
          <td bgcolor="#90D0FC">所带学生人数</td>
          <td><el-input v-model="formInfo.student_number" placeholder="请输入内容"></el-input></td> -->

          <!-- <td bgcolor="#90D0FC">人事关系</td>
          <td>
            <el-select v-model="formInfo.personrelation" placeholder="请选择">
              <el-option
                v-for="item in personrelationList"
                :key="item.label"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select></td> -->
        </tr>
      </table>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple" style="margin: 30px 20px 20px 0">
          <div class="text"><strong class="text">个人工作经历</strong></div>
          <el-table
            style="width:96.9%;padding-left:5px"
            :data="tableData1"
            height="250"
            v-loading="loading">
            <el-table-column
            prop="id"
            label="id"
            width="50">
          </el-table-column>
          <el-table-column
            label="姓名"
            prop="name"
            width="120">
          </el-table-column>
          <el-table-column
            label="工作单位"
            prop="work"
            width="180">
          </el-table-column>
          <el-table-column
            label="职务"
            prop="preoccupation"
            width="140">
          </el-table-column>
          <el-table-column
            label="开始时间"
            prop="start_time"
            width="145">
          </el-table-column>
          <el-table-column
            label="结束时间"
            prop="end_time"
            width="145">
          </el-table-column>
        </el-table>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light" style="margin: 30px 20px 20px 0">
          <div class="text"><strong class="text">个人教育经历</strong></div>
           <el-table
            style="width:96.9%;padding-left:5px"
            :data="tableData2"
            height="250"
            v-loading="loading">
            <el-table-column
            prop="id"
            label="id"
            width="90">
            </el-table-column>
            <el-table-column
              label="姓名"
              prop="name"
              width="160">
            </el-table-column>
            <el-table-column
              label="毕业院校"
              prop="graduated_sch"
              width="200">
            </el-table-column>
            <el-table-column
              label="求学阶段"
              prop="edu_type"
              width="150">
            </el-table-column>
            <el-table-column
              label="攻读专业"
              prop="major"
              width="180">
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple" style="margin: 30px 20px 20px 0">
          <div class="text"><strong class="text">个人培训经历</strong></div>
          <el-table
            style="width:96.9%;padding-left:5px"
            :data="tableData3"
            height="250"
            v-loading="loading">
            <el-table-column
            prop="id"
            label="id"
            width="90">
          </el-table-column>
          <el-table-column
            label="培训地点"
            prop="traindata_address"
            width="200">
          </el-table-column>
          <el-table-column
            label="培训级别"
            prop="traindata_level"
            width="150">
          </el-table-column>
          <el-table-column
            label="培训名称"
            prop="traindata_name"
            width="180">
          </el-table-column>
        </el-table>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light" style="margin: 30px 20px 20px 0">
          <div class="text"><strong class="text">个人荣誉奖项</strong></div>
           <el-table
            style="width:96.9%;padding-left:5px"
            :data="tableData4"
            height="250"
            v-loading="loading">
            <el-table-column
            prop="id"
            label="id"
            width="90">
            </el-table-column>
            <el-table-column
              label="姓名"
              prop="name"
              width="160">
            </el-table-column>
            <el-table-column
              label="荣誉时间"
              prop="honor_time"
              width="200">
            </el-table-column>
            <el-table-column
              label="荣誉地点"
              prop="honor_company"
              width="150">
            </el-table-column>
            <el-table-column
              label="荣誉名称"
              prop="honor_name"
              width="180">
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
     <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple" style="margin: 30px 20px 20px 0">
          <div class="text"><strong class="text">科研情况（已有项目）</strong></div>
          <el-table
            height="250"
            style="width:96.9%;padding-left:5px"
            :data="tableData5"
            v-loading="loading">
            <el-table-column
            prop="id"
            label="id"
            width="140">
          </el-table-column>
            <el-table-column
            prop="project_id"
            label="项目编号"
            width="140">
          </el-table-column>
          <el-table-column
            label="项目名称"
            prop="project_name"
            width="255">
          </el-table-column>
          <el-table-column
            label="项目类型"
            prop="project_type"
            width="183">
          </el-table-column>
        </el-table>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light" style="margin: 30px 20px 20px 0">
          <div class="text"><strong class="text">科研情况（已有成果）</strong></div>
            <el-table
            height="250"
            style="width:96.9%;padding-left:5px"
            :data="tableData6"
            v-loading="loading">
            <el-table-column
            prop="id"
            label="id"
            width="140">
          </el-table-column>
          <el-table-column
            label="成果名称"
            prop="achievement_name"
            width="255">
          </el-table-column>
          <el-table-column
            label="成果所在公司"
            prop="publish_company"
            width="200">
          </el-table-column>
          <el-table-column
            label="成果时间"
            prop="publish_time"
            width="183">
          </el-table-column>
        </el-table>
        </div>
      </el-col>
    </el-row>
    
  </div>
</template>

<script>
import http from '../../../../src/assets/js/http'
  export default {
    data() {
      return {
        userInfo:Lockr.get('userInfo'),
        formInfo:{
          name:'',
          sex:'',
          nation:'',
          birth:'',
          edu:'',
          degree:'',
          politics:'',
          preoccupation:'',
          majoroccupation:'',
          majortime:'',
          sch:'',
          jobrank:'',
          idnumber:'',
          address:'',
          postalcode:'',
          office:'',
          phone:'',
          qq:'',
          email:'',
          fax:'',
          health:'',
          teacher:'',
          master: '',
          instructor: '',
          student_degree: '',
          student_number1: '',
          student_number2: '',
          student_number3: '',
          personrelation:'',
          level_1: '',
          level_2: '',
          level: []
        },  
        options: [{
          value: 1,
          label:'学生工作处（部）、研究生工作处（部）',
          children: [{
            value: 1,
            label: '学工管理干部'
          },{
            value: 2,
            label: '研工管理干部'
          }]
        },{
          value: 2,
          label:'二级学院',
          children: [{
            value: 1,
            label: '本、专科生专兼职辅导员'
          },{
            value: 2,
            label: '研究生专兼职辅导员'
          },{
            value: 3,
            label: '二级学院管理干部'
          }]
        },{
          value: 3,
          label: '心理健康工作中心（处）',
          children: [{
            value: 1,
            label: '心理健康专兼职教师'
          }, {
            value: 2,
            label: '心理健康管理干部'
          }]
        }],
        student:[
         {
          value: 1,
          label: '本科生'
        },{
          value: 2,
          label: '专科生'
        },{
          value: 3,
          label: '研究生'
        }  
        ],
           personrelationList:[
        {
          value: 1,
          label: '事业编制'
        },{
          value: 2,
          label: '合同制'
        },{
          value: 3,
          label: '劳务派遣'
        },{
          value: 4,
          label: '其他'
        }  
        ],
        tableData1: [],
        tableData2: [],
        tableData3: [],
        tableData4: [],
        tableData5: [],
        tableData6: [],
        id: ''
      }
    },
    methods: {
      handleChange(value) {
        // console.log(value)
        this.formInfo.level_1 = value[0]
        this.formInfo.level_2 = value[1]
      },
      init() {
        this.getPersonMsg()
      },
      // 进入下载个人所有信息表
      down() {
        window.open("http://8.142.34.26:8097/php/uploads/html/downloadPersonInfo.html?item=" + this.id)
        // console.log(1)
      },
      // 渲染个人所有信息
      getPersonMsg() {
          let data = {
            id: this.$route.params.id
          }
        // console.log(data)
        this.apiPost('admin/Train/TrainList', data).then((res) => {
          this.handelResponse(res, (data) => {
             console.log(res)
            let personMsg = data.train[0]
            this.formInfo = personMsg
            this.formInfo.level = [personMsg.level_1,personMsg.level_2]
            // console.log(this.formInfo.level)
            this.id = personMsg.id
            this.formInfo.sch = Lockr.get('schInfo')['sch_id_'+personMsg.sch].sch_name
              this.tableData1 = data.exwork
              this.tableData2 = data.exedu
              this.tableData3 = data.extrain

              this.tableData4 = data.exhonor
              this.tableData5 = data.exproject
              this.tableData6 = data.exachievement
          })
        })
      },
      // 根据前一个界面，选择不一样返回界面
      goBack() {
        if(this.$route.params.last === '1') {
          this.$router.push({
            name: 'uncheckList',
            params: {
              searchData: this.$route.params.searchData
            }
          })
        } else if(this.$route.params.last === '3') {
          this.$router.push({
            name: 'checkedList',
            params: {
              searchCheck: this.$route.params.searchCheck
            }
          }) 
        } else if(this.$route.params.last === '2') {
          this.$router.push({
            name: 'infoList',
            params: {
              id: this.$route.params.id,
              searchName: this.$route.params.searchName
            }
          })
        }
      }
    },
    created(){
      _g.closeGlobalLoading()
      this.init()
      console.log(this.$route.params)
    },
    components: {
    },
    mixins: [http]
  }
</script>

<style scoped>
.table td{
  width: 200px;
  height: 50px;
  text-align: center;
}
.item{
  position: relative;
  display: inline-block;
  margin-left: 10px;
}
input{
    border: none;
    overflow: hidden;
    height: 100%;
    width: 100%;
    text-align: center;
    background-color:#FFFFFF;
}
.text {
  margin-bottom: 13px;
  font-size: 20px
}
.prompt {
  color:grey;
  padding-left: 30px
}
</style>